<?php echo $this->render('/public/header'); ?>
<?php use yii\helpers\Url; ?>
<style>.input-noboder {
        border: none;
        padding: 0px;
        margin: 0px;
    }</style>
<script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script>
<link href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css" rel="stylesheet">
<style>
    input[type=file] {
        display: none
    }

    label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: 700;
    }

    .pay_show ul li {
        border: 1px solid black;
        margin-top: 10px;
        padding: 5px
    }
    .el-upload-dragger{
        width:80px
    }
</style>
<div class="col-lg-12" id="main">
    <a href="javascript:window.history.go(-1);" class="layui-btn layui-btn-normal" style="margin-left:25px">返回</a>
    <br/>
    <br/>
    <div class="col-lg-12 col-md-12" id="tableController">
        <div class="col-lg-4 col-md-4">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">buyer</div>
                    <!-- <input type="text" class="form-control" v-model="customer_info.buyer"> -->
                    <el-autocomplete
                            v-model="customer_info.buyer"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="搜索用户"
                            @select="handleSelect"
                    ></el-autocomplete>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">Address</div>
                    <input type="text" class="form-control" v-model="customer_info.address">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">客户Email</div>
                    <input type="text" class="form-control" v-model="customer_info.email">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">tel</div>
                    <input type="text" class="form-control" v-model="customer_info.tel">
                </div>
            </div>
        </div>
        <br/>
        <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">date</div>
                    <input type="date" style="width:201px" class="form-control" v-model="date">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">pi编号</div>
                    <input type="text" style="width:201px" class="form-control" v-model="pi_id">
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">Sale rep</div>
                    <input type="text" class="form-control" v-model="sale_rep">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon" style="width:100px">email</div>
                    <input type="text" class="form-control" v-model="email">
                </div>
            </div>
        </div>
        <br/>
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
            <div style="float: right">
                <el-switch
                        name="extra_fee"
                        v-model="extra_fee_show"
                        on-color="#13ce66"
                        on-text="开启额外费用"
                        off-text="关闭额外费用"
                        width=100
                        on-value="true"
                        off-value="false"
                        off-color="#ff4949"
                        :on-change="this.handleextra_fee()">
                </el-switch>
                <el-switch
                        name="subtotal"
                        v-model="subtotal_show"
                        on-color="#13ce66"
                        on-text="开启总额"
                        off-text="关闭总额"
                        width=100
                        on-value="true"
                        off-value="false"
                        off-color="#ff4949"
                        :on-change="this.handlesubtotal()">
                </el-switch>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>Item Name</th>
                        <th style="width:80px">上传图片</th>
                        <th style="width:140px">图片预览</th>
                        <th style="width:300px">Description</th>
                        <th>Price</th>
                        <th>Qty (pcs)</th>
                        <th>Extra Fee</th>
                        <th>Subtotal</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(i,k) in list">
                        <td><input style="width:100%;" v-model="i.item"/></td>
                        <td>
                            <div class="source">
                                <el-upload
                                        :drag=true
                                        :name="'img_'+k"
                                        class="upload-demo"
                                        action="/sell/upload_img"
                                        :on-success="handlesuccess">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                            </div>
                        </td>
                        <td>
                            <div v-for="(img,k2) in i.img_src" style="width:120px">
                                <i class="middleImg icon tu_04" @click="del_img(k,k2)" style="float:right"></i>
                                <img :src="img" style="max-width:100px"/>
                            </div>
                        </td>
                        <td><textarea onkeyup="Base.adjustObjHeight(this, 50)"
                                      style="width:100%;height:35px;overflow:hidden" v-model="i.description"></textarea>
                        </td>
                        <td>$<input type="number" style="width:80%" v-model="i.price"/></td>
                        <td>pcs<input type="number" style="width:80%" v-model="i.pcs"/></td>
                        <td><input type="number" style="width:100%" v-model="i.extra_fee"/></td>
                        <td>{{(i.price*i.pcs+parseFloat(i.extra_fee)).toFixed(2)}}</td>
                        <td>
                            <i class="middleImg icon tu_09" @click="del_list(k)"></i>
                            <i class="middleImg icon tu_10" @click="add_list()"></i>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:20px">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <label>Service Fee</label>
                    <div class="form-inline">
                        <input type="text" placeholder="服务费描述" class="form-control" v-model="service.description"/>
                        <input type="number" style="width:100px" class="form-control" placeholder="服务费金额"
                               v-model="service.fee"/>
                        <el-switch
                                v-model="service.show"
                                on-color="#13ce66"
                                off-color="#ff4949"
                                on-value="true"
                                off-value="false"
                        ></el-switch>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <label>Shipping Fee</label>
                    <div class="form-inline">
                        <input type="text" placeholder="运费描述" class="form-control" v-model="ship.description"/>
                        <input type="number" style="width:100px" class="form-control" placeholder="运费金额"
                               v-model="ship.fee"/>
                        <el-switch
                                v-model="ship.show"
                                on-color="#13ce66"
                                off-color="#ff4949"
                                on-value="true"
                                off-value="false"
                        ></el-switch>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <label>Custom Duty</label>
                    <div class="form-inline">
                        <input type="text" placeholder="税费描述" class="form-control" v-model="duty.description"/>
                        <input type="number" style="width:100px" class="form-control" placeholder="税费金额"
                               v-model="duty.fee"/>
                        <el-switch
                                v-model="duty.show"
                                on-color="#13ce66"
                                on-value="true"
                                off-value="false"
                                off-color="#ff4949"
                        ></el-switch>
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                    <label>总额显示</label>

                    <div class="form-inline">
                        <span>总金额:</span>
                        <span>${{amount}}</span>
                        <el-switch
                                v-model="total_amount_show"
                                on-color="#13ce66"
                                off-color="#ff4949"
                                on-value="true"
                                off-value="false"
                        ></el-switch>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12" style="margin-top:30px">
                    <label>付款方式</label>
                    <el-checkbox-group v-model="pay_show">
                        <el-checkbox label=1>tt</el-checkbox>
                        <el-checkbox label=2>西联</el-checkbox>
                        <el-checkbox label=3>paypal</el-checkbox>
                    </el-checkbox-group>
                    <div class="pay_show">
                        <ul>
                            <li v-if="pay_detail_show(1)">
                                <strong>TT详情</strong><br/>
                                Bank Information for Wire Transfer(Customer is responsible for "All Bank's
                                Charges")<br/>
                                Beneficiary’s Bank: BANK OF COMMUNICATIONS CO.,LTD OFFSHORE BANKING UNIT<br/>
                                Address: NO 188, YINCHENG ZHONG ROAD, SHANGHAI, CHINA<br/>
                                Beneficiary’s Name: Jingwholesale Trading Co., Limited<br/>
                                Account: OSA90000196048100<br/>
                                Swift Code: COMMCN3XOBU<br/>
                            </li>
                            <li v-if="pay_detail_show(2)">
                                <strong>西联详情</strong><br/>
                                PAYMENT FOR WESTERN UNION / MONEYGRAM (Please send to cash with USD not CNY)<br/>
                                First Name: Jing<br/>
                                Last Name: Zhu <br/>
                                Beneficiary’s City: Yiwu, Zhejiang Province, China. Postcode:322000<br/>
                            </li>
                            <li v-if="pay_detail_show(3)">
                                <strong>paypal详情</strong><br/>
                                PAYMENT FOR PAYPAL (Customer is responsible for "PayPal's service Charges")<br/>
                                Account: customers@jingwholesale.com<br/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:20px">
                <label>报价备注</label>
                <br/>
                <ul class="list-group">
                    <li class="list-group-item" style="padding:0;border:none;margin:2px" v-for="(i,k) in this.para">
                        <input type="text" v-model="i.p" style="width:100%;font-weight: bold" v-if="k==1 || k==3"/>
                        <input type="text" v-model="i.p" style="width:100%;" v-else/>
                    </li>
                </ul>
            </div>
            <br/>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <button type="submit" class="btn btn-primary" @click="upload()">确认添加</button>
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#tableController",
            data:
                {
                    list:<?php echo $this->params['quote']['product_list'];?>,
                    number: "<?php echo $this->params['quote']['number'];?>",
                    email: "<?php echo $this->params['param']['email'];?>",
                    sale_rep: "<?php echo $this->params['param']['sale_rep'];?>",
                    date: "<?php echo date('Y-m-d');?>",
                    customer_info:<?php echo $this->params['quote']['customer_info'];?>,
                    para:<?php echo $this->params['quote']['para'];?>,
                    service:<?php echo $this->params['quote']['service'];?>,
                    ship:<?php echo $this->params['quote']['ship'];?>,
                    duty:<?php echo $this->params['quote']['duty'];?>,
                    subtotal_show: "true",
                    extra_fee_show: "true",
                    total_amount_show: "true",
                    pi_id: '<?php echo $this->params['param']['pi_id'];?>',
                    quote_id: '<?php echo yii::$app->request->get('id');?>',
                    pay_show: ["1"]
                },

            computed: {
                service_fee: function () {
                    var l = this.list.length;
                    var sum = 0;
                    for (var i = 0; i < l; i++) {
                        if (this.list[i].price != 0) {
                            sum += this.list[i]['price'] * this.list[i]['pcs'] + parseFloat(this.list[i].extra_fee);
                        }

                    }
                    return Base.service_fee(sum);
                },
                amount: function () {
                    var total = 0;
                    for (var i in this.list) {
                        total += this.list[i]['price'] * this.list[i]['pcs'] + parseFloat(this.list[i].extra_fee)
                    }
                    if (this.service.show == 'true') {
                        total += parseFloat(this.service_fee);
                    }
                    if (this.ship.show == 'true') {
                        total += parseFloat(this.ship.fee);
                    }
                    if (this.duty.show == 'true') {
                        total += parseFloat(this.duty.fee);
                    }
                    return total.toFixed(2);
                }
            },
            watch: {
                service_fee: function (v) {
                    this.service.fee = v;
                }
            },
            methods:
                {
                    handlesuccess: function (res) {
                        if (res.code == 1) {
                            var k = res.name.split("_")[1];
                            if (this.list[k].img_src.length >= 1) {
                                this.$message({
                                    type: "error",
                                    message: "目前只支持一张图片",
                                })
                            }
                            else {
                                this.list[k].img_src.push(res.msg);
                            }


                        }
                        else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                    },
                    del_img: function (listk, imgk) {
                        this.list[listk].img_src.splice(imgk, 1);
                    },
                    del_list: function (k) {
                        if (this.list.length == 1) {
                            layer.alert("不能再删除了哦");
                            return false;
                        }
                        this.list.splice(k, 1);
                    },
                    add_list: function () {
                        this.list.push({
                            "item": "",
                            img_src: [],
                            description: "",
                            price: 0,
                            "pcs": 1,
                            extra_fee: 0,
                            subtotal: ""
                        });

                        setTimeout(function () {
                            vm.handleextra_fee();
                            vm.handlesubtotal();
                        }, 1);
                    },
                    upload: function () {
                        if (!this.customer_info.buyer) {
                            layer.alert("客户名称未填");
                            return false;
                        }
                        if (!this.list[0].item) {
                            layer.alert("没有报价产品");
                            return false;
                        }
                        var url = "<?php echo Url::to(['sell/add_pi']);?>";
                        for (k in this.list) {
                            this.list[k]['subtotal'] = this.list[k]['price'] * this.list[k]['pcs'] + parseFloat(this.list[k]['extra_fee']);
                        }
                        var str = JSON.stringify(this.list);
                        var pay_show = JSON.stringify(this.pay_show);
                        var data =
                            {
                                date: this.date, list: str, number: this.number, email: this.email,
                                sale_rep: this.sale_rep, customer_info: this.customer_info,
                                service_fee: this.service_fee,
                                para: this.para, service: this.service, ship: this.ship, duty: this.duty,
                                extra_fee_show: this.extra_fee_show, subtotal_show: this.subtotal_show,
                                total_amount_show: this.total_amount_show,
                                pi_id: this.pi_id, quote_id: this.quote_id, pay_show: pay_show
                            };
                        $.post(url, data, function (res) {
                            if (res.code != 1) {
                                layer.alert(res.msg);
                            }
                            else {
                                layer.confirm(res.msg, {}, function () {
                                    window.location.href = "/sell/pi_list";
                                })
                            }

                        }, 'json')
                    },
                    querySearchAsync: function (queryString, cb) {
                        if (queryString != "") {
                            $.post('/api/search_customer_by_like', {name: queryString}, function (res) {
                                if (res.data) {
                                    cb(res.data);
                                }

                            }, 'json')
                        }

                    },
                    handleSelect: function (item) {
                        this.customer_info.buyer = item.value;
                        this.customer_info.email = item.email;
                        this.number = item.number;
                    },
                    handleextra_fee: function () {
                        if (this.extra_fee_show == 'false') {
                            $("table tr").find("th:eq(6)").hide();
                            $("table tr").find("td:eq(6)").hide();
                        }
                        else {
                            $("table tr").find("th:eq(6)").show();
                            $("table tr").find("td:eq(6)").show();
                        }
                    },
                    handlesubtotal: function () {
                        if (this.subtotal_show == 'false') {
                            $("table tr").find("th:eq(7)").hide();
                            $("table tr").find("td:eq(7)").hide();
                        }
                        else {
                            $("table tr").find("th:eq(7)").show();
                            $("table tr").find("td:eq(7)").show();
                        }
                    },
                    pay_change: function (v) {
                        this.pay_show = v;
                    },
                    pay_detail_show: function (v) {

                        for (i in this.pay_show) {
                            if (this.pay_show[i] == v) {
                                return true
                            }
                        }
                        return false;
                    }
                }

        });
        $(function () {
            if (vm.subtotal_show == 'false') {
                $("table tr").find("th:eq(7)").hide();
                $("table tr").find("td:eq(7)").hide();
            }
            if (vm.extra_fee_show == 'false') {
                $("table tr").find("th:eq(6)").hide();
                $("table tr").find("td:eq(6)").hide();
            }
        })
    </script>
    <?php echo $this->render('/public/footer'); ?>
